<template>
  <div class="Level">
    <el-row
      :gutter="20"
      v-for="(item, index) in items"
      :key="index"
      class="item"
    >
      <el-col :span="20" class="form">
        <el-col :span="9" :offset="1">
          <el-input
            v-model="item.name"
            placeholder="请输入等级名称"
            size="normal"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            v-model.number="item.min"
            :disabled="initVal != ''"
            @blur="item.min = inputChange(item, item.min, 'min')"
          >
            <template slot="append">含</template>
          </el-input>
        </el-col>
        <el-col :span="1" style="text-align: center"> - </el-col>
        <el-col :span="6">
          <el-input
            v-model.number="item.max"
            :disabled="item.max == 100"
            @blur="item.max = inputChange(item, item.max, 'max')"
          >
            <template slot="append">不含</template>
          </el-input>
        </el-col>
        <el-col :span="1">
          <i
            class="el-icon-plus"
            @click="addClick"
            v-if="index == 0"
            :disabled="item.max < 0"
          ></i>
          <i class="el-icon-minus" @click="delClick(index)" v-else></i>
        </el-col>
      </el-col>
      <el-col :span="4">
        <el-upload
          action="/api/sys/file/upload"
          ref="upload"
          accept=".jpg,.png"
          :auto-upload="true"
          :show-file-list="false"
          :file-list="fileList"
          :on-change="(file, fileList) => onChange(file, fileList, index)"
          :on-success="(res) => onSuccess(res, index)"
        >
          <div class="upload-btn" slot="trigger">
            <img v-if="item.imageUrl" :src="item.imageUrl" class="img" />
            <div v-else>
              <div class="icon el-icon-plus"></div>
              <div class="text">等级照片</div>
            </div>
          </div>
        </el-upload>
      </el-col>
    </el-row>
    <div>若不需要展示等级图片，可不用上传！</div>
  </div>
</template>

<script>
export default {
  name: 'level',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    initVal: {
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      // items: [{ name: '', min: 0, max: 10, imageUrl: '' }],
      fileList: [],
      imageUrl: '',
      minDisabled: false
    }
  },
  watch: {
    initVal(val) {
      if (val) {
        this.minDisabled = true
      }
    }
  },
  methods: {
    addClick() {
      let last = this.items.at(-1)
      if (last.max >= 100) return
      if (last.max > last.min) {
        this.items.push({ name: '', min: last.max, max: '', imageUrl: '' })
      } else {
        this.$message.warning('请输入正确的区间值')
      }
    },
    delClick(index) {
      this.items.splice(index, 1)
    },
    onChange(file, fileList, index) {
      // console.log('file, fileList, index: ', file, fileList, index)
      // this.items[index].imageUrl = URL.createObjectURL(file.raw)
    },
    onSuccess(res, index) {
      let { data } = res
      this.items[index].imageUrl = data.url
    },
    inputChange(item, val, type) {
      if (typeof val == 'number') {
        if (val > 100) {
          this.$message.warning('请输入正确的区间值')
          val = ''
        } else {
          val = Math.abs(val)
        }
        if (type == 'max' && item.min >= item.max) {
          this.$message.warning('请输入正确的区间值')
          val = ''
        }
      }
      return val
    }
  }
}
</script>

<style lang="scss" scoped>
.Level {
  .item {
    margin-bottom: 10px;
  }
  ::v-deep .el-input {
    .el-input__inner {
      padding: 0 5px;
    }
    .el-input-group__append {
      padding: 0 5px;
    }
  }
  .form {
    padding: 24px 0;
    background: #eee;
  }
  .upload-btn {
    width: 80px;
    height: 80px;
    border-radius: 3px;
    border: 1px dotted #ccc;
    text-align: center;
    color: #999;
    .icon {
      font-size: 24px;
      margin-top: 10px;
      font-weight: bold;
    }
    .img {
      width: 80px;
      height: 80px;
    }
  }
}
</style>